<template>
  <div class="Box">
    <admin-index v-permission="['home:admin']"></admin-index>
    <repair-index v-permission="['home:repair']"></repair-index>
    <area-index v-permission="['home:area']"></area-index>
    <didi-index v-permission="['home:didi']"></didi-index>
  </div>
  <div class="AD_Box">
    <el-carousel height="300px" :motion-blur="true">
      <el-carousel-item v-for="(item, index) in imageList" :key="index">
        <img :src="item">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">
import _img_ from "@/assets/image/login_left.png"
import { defineAsyncComponent } from "vue";
// 导入路由
import { useRouter } from "vue-router";
// 导入pinia中的user模块
import useUserStore from "@/stores/modules/user";
// 得到user模块中保存的菜单列表数据
const menuList = useUserStore().menuList;
// 得到路由实例对象，用来做跳转
const router = useRouter();
// 如果菜单列表为空，则跳转到登录页
if (menuList.length === 0) {
  // 跳转到 /login 登陆页面
  router.push("/login");
} else {
  // 如果有菜单列表，则跳转到第一个菜单的子菜单列表的第一个路由
  if (localStorage.getItem('push_default') == undefined) {
    for (let i = 0; i < menuList.length; i++) {
      // 判断有没有子菜单
      if (menuList.length <= 2 && menuList.length > 0) {
        const itemI: any = menuList[i]
        if (itemI.children?.length > 0) {
          // 跳转到第一个子菜单
          router.push({ path: itemI.children[0].path });
          localStorage.setItem('push_default', "true")
          // 跳转完成，跳出循环
          break;
        }
      }

    }
  }
}

const imageList = [_img_, _img_, _img_, _img_]

const AdminIndex = defineAsyncComponent(() => import("./components/adminIndex.vue"));
const RepairIndex = defineAsyncComponent(() => import("./components/repairIndex.vue"));
const AreaIndex = defineAsyncComponent(() => import("./components/areaIndex.vue"));
const DidiIndex = defineAsyncComponent(() => import("./components/didiIndex.vue"));
</script>
<style scoped>
.Box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
}

.Box>div:only-child {
  grid-column: 1/3;
}

.AD_Box{
  margin-top: 50px;
}

img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
